<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../static/image/bitbug_favicon.ico" rel="shortcut icon">
    <title>熊猫优选</title>
    <!-- 引入重置样式 reset.css-->
    <link rel="stylesheet" href="../css/reset.css">
    <!-- 引入轮播样式 swiper-bundle.min.css-->
    <link rel="stylesheet" href="../lib/swiper/swiper-bundle.min.css">
    <!-- 引入首页样式 index.css-->
    <link rel="stylesheet" href="../css/index.min.css">
</head>

<body>
    <!-- 头部 -->
    <div id="header" class="clearfix">
        <!-- 登录，注册，去购物车 -->
        <div class="shop-link fr">
            <a href="../pages/login.html" class="goLogin">登录</a>
            <a href="../pages/register.html" class="goRegister">注册</a>
            <a href="../pages/cart.html" class="goCart"><img src="../static/image/car.png" alt=""></a>
        </div>
        <div class="container">

            <!-- logo 图片和文字 -->
            <a href="#" class="logo clearfix fl">
                <img src="../static/image/logo.png" alt="logo" class="fl">
                <div class="text fl">
                    <h3>熊猫优选</h3>
                    <p>XIONG MAO YOU XUAN</p>
                </div>
            </a>



            <!-- 搜索框 -->
            <div class="seachBox fl">
                <form action="">
                    <input type="text" placeholder="搜索商品，发现更多优惠">
                    <button>搜索</button>
                </form>
            </div>
            <!-- 全程包邮 七天退换 品质保证 -->
            <div class="right fr">
                <div>
                    <img src="../static/image/mail.png" alt="全程包邮">
                    <p>全程包邮</p>
                </div>
                <div>
                    <img src="../static/image/return.png" alt="全程包邮">
                    <p>七天退换</p>
                </div>
                <div>
                    <img src="../static/image/quality.png" alt="全程包邮">
                    <p>品质保证</p>
                </div>
            </div>
        </div>

    </div>
    <!-- 导航 -->
    <div id="nav">
        <ul class="container clearfix">
            <li class="first active">首页</li>
            <li class="second">9块9包邮</li>
            <li class="three">超值大额券</li>
            <li class="four">降温急救穿搭</li>
        </ul>
    </div>
    <!-- 轮播 -->
    <div id="banner" class="container">
        <!-- 左边导航栏 -->
        <ul class="ul1">
            <li class="li1">
                <img src="../static/image/skirt.png" alt="女装">
                <span>女装</span>
                <span>/女鞋</span>
            </li>
            <li class="li2">
                <img src="../static/image/shoes.png" alt="男装">
                <span>男装</span>
                <span>/男鞋</span>
            </li>
            <li class="li3">
                <img src="../static/image/lipstick.png" alt="美妆">
                <span>美妆</span>
                <span>/个护</span>
            </li>
            <li class="li4">
                <img src="../static/image/bag.png" alt="箱包">
                <span>配饰</span>
                <span>/箱包</span>
            </li>
            <li class="li5">
                <img src="../static/image/snacks.png" alt="零食王国">
                <span>零食王国</span>
            </li>
            <li class="li6">
                <img src="../static/image/bottle.png" alt="母婴用品">
                <span>母婴用品</span>
            </li>
            <li class="li7">
                <img src="../static/image/phone.png" alt="手机">
                <span>手机</span>
                <span>/数码</span>
            </li>
            <li class="li8">
                <img src="../static/image/underwear.png" alt="内衣袜子">
                <span>内衣袜子</span>
            </li>
            <li class="li9">
                <img src="../static/image/sofa.png" alt="家居">
                <span>文娱</span>
                <span>/家居</span>
            </li>
        </ul>
        <!-- 动态菜单 -->
        <div class="menu-active add">
            <div class="menu-title-top">
                <!-- <h2></h2> -->
            </div>
            <ul class="menu-content-top">
                <li>衬衫</li>
                <li>裤装</li>
            </ul>
            <div class="menu-title-bottom">
                <!-- <h2></h2> -->
            </div>
            <ul class="menu-content-bottom">
                <li>帆布鞋</li>
            </ul>
        </div>
        <!-- 右边图片及链接 -->
        <div class="right">
            <!-- 上部分 -->
            <div class="top clearfix">
                <!-- 轮播图 -->
                <div class="swiper-container fl">
                    <div class="swiper-wrapper">

                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
                <!-- 9块9包邮 -->
                <div class="yellow fr" >

                </div>
            </div>
            <!-- 下部分 -->
            <div class="bottom clearfix">
                <div class="pink bottom1 fl clearfix">

                </div>
                <div class="pink fl orange clearfix">

                </div>
                <div class="pink fl blue clearfix">
                    <div class="text fl">
                        <p>扫码下载APP</p>
                        <p>发现更多惊喜</p>
                    </div>
                    <img src="../static/image/code.png" alt="" class="fl">
                </div>
            </div>
        </div>
    </div>
    <!-- 小编精选 -->
    <div id="title" class="container">
        <h4>小编精选</h4><span>每天更新</span>
    </div>
    <!-- 商品选择列表 -->
    <div id="productsList" class="container">
        <ul class="product">

        </ul>
        <!-- <ul class="ulmore"></ul> -->
    </div>
    <!-- 查看更多 -->
    <div id="more" class="container">
        <div class="moreBox">
            <div class="getmore">查看更多</div>
        </div>
    </div>
    <!-- 页脚 -->
    <div id="footer">
        <div class="container">
            <div class="top">
                <div class="left">
                    <img src="../static/image/icon.png" alt="logo">
                    <div class="text">
                        <h3>熊猫优选</h3>
                        <p>年轻人网购首选</p>
                        <p>购物领券更省钱</p>
                    </div>
                </div>
                <div class="right">
                    <span>|</span>
                    <a href="#">下载APP</a>
                </div>
            </div>
            <div class="bottom">
                <span><img src="../static/image/policeIcon.png" alt="">&nbsp;浙公安网备案 33010602009949号 | ICP备案号:</span>
                <a href="#">浙ICP备17012864号-1</a>
                <span>|&nbsp;<img src="../static/image/license.png" alt=""></span>
                <a href="#">证件信息</a>
            </div>
        </div>
    </div>
    <!-- 全国安全，可信网站 -->
    <div id="security" class="container">
        <img src="../static/image/aqkx_83x30.png" alt="">
    </div>
    <!-- 回到顶部 -->
    <div id="backTop" onclick="backTop()">
        <img src="../static/image/goTopBtn.png" alt="回到顶部">
    </div>


    <!-- 动态菜单 -->
    <script type="text/html" id="menu-title1">
        <h2>{{menuTitleTop}}</h2>
    </script>
    <script type="text/html" id="menu-title2">
        <h2>{{menuTitleBottom}}</h2>
    </script>


    <!-- 轮播 -->
    <script src="../lib/swiper/swiper-bundle.min.js"></script>
    <script>
        
    </script>
    <!-- 轮播 -->
    <script type="text/html" id="showbannerimg">
        {{each bannerImages}}
        <div class="swiper-slide">
            <img src="{{$value.imageUrl}}" alt="banner">
        </div>
        {{/each}}
    </script>
    <!-- 9块9包邮 -->
    <script type="text/html" id="yellow">
        <p>{{title1}}</p>
        <div>{{text1}}</div>
        <img src="{{tagImageUrl1}}" alt="拖鞋">
    </script>
    <!-- 速来抢购 -->
    <script type="text/html" id="bottom1">
        <div class="text fl">
            <h3>{{title2}}</h3>
            <p>{{text2}}</p>
            <button>Go</button>
        </div>
        <img src="{{tagImageUrl2}}" alt="" class="fl">
    </script>
    <!-- 优惠直击低价 -->
    <script type="text/html" id="orange">
        <div class="text fl">
            <h3>{{title3}}</h3>
            <p>{{text3}}</p>
            <button>Go</button>
        </div>
        <img src="{{tagImageUrl3}}" alt="" class="fl">
    </script>
    <!-- 加载更多 -->
    <script type="text/html" id="showmore">
        {{each dataList}}
        <li index-data={{$value.id}}>
            <img src="{{$value.image}}" alt="">
            <span>{{$value.commodityId}}</span>
            <div class="bottom">
                <p>{{$value.title}}</p>
                <div class="from"><span>淘宝</span><span>包邮</span></div>
                <div class="message">
                    <span>￥</span>
                    <span>{{$value.price}}</span>
                    <!-- <span>.9</span> -->
                    <span>{{$value.saleNum}}</span>
                    <button>{{$value.couponValue}}</button>
                </div>
            </div>
        </li>
        {{/each}}
    </script>

    <script src="../js/util.js"></script>
    <script src="../lib/jquery-3.6.0.min.js"></script>
    <script src="../lib/template-web.js"></script>
    <script src="../js/index.js"></script>
</body>

</html>